<template>
  <div class="map-container">
    <div class="main-map" ref="mainMap"></div>
    <!-- <JarShow /> -->
    <div class="thumbnail-map" ref="thumbnailMap"></div>
  </div>
</template>

<script>
import JarShow from './jarShow.vue'
import L from "leaflet";

export default {
  name: "MapComponent",
  data() {
    return {
      mainMap: null,
      thumbnailMap: null,
      mainBounds: null,
      thumbnailBounds: null,
      sync: true,
    };
  },
  components: {
    JarShow
  },
  mounted() {
    this.initMainMap();
    this.initThumbnailMap();
    this.syncMaps();

    // Add event listeners for map movements
    this.mainMap.on("move", this.onMainMapMove); // Add event listeners for map movements
    
    this.thumbnailMap.on("move", this.onThumbnailMapMove);
  },
  methods: {
    initMainMap() {
      this.mainMap = L.map(this.$refs.mainMap).setView([51.505, -0.09], 13);
      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(this.mainMap);

      this.mainBounds = this.mainMap.getBounds();
    },
    initThumbnailMap() {
      this.thumbnailMap = L.map(this.$refs.thumbnailMap, {
        center: [51.505, -0.09],
        zoom: 1,
        zoomControl: false,
        attributionControl: false,
        dragging: false,
        touchZoom: false,
        scrollWheelZoom: false,
        doubleClickZoom: false,
        boxZoom: false,
        keyboard: false,
        tap: false,
      });

      L.tileLayer(
        JarShow,
        // "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
         {
        attribution: "",
      }).addTo(this.thumbnailMap);

      this.thumbnailBounds = this.thumbnailMap.getBounds();

      // Set the size of the thumbnail map to be a small fraction of the main map
      const thumbnailSize = this.$refs.thumbnailMap.getBoundingClientRect();
      this.thumbnailMap.setSize(
        L.point(thumbnailSize.width, thumbnailSize.height)
      );

      // Fit the bounds of the thumbnail map to the main map bounds
      this.fitThumbnailBounds();
    },
    fitThumbnailBounds() {
      const mainBounds = this.mainMap.getBounds();
      const thumbnailBounds = this.thumbnailMap.getBounds();
      const zoom = this.thumbnailMap.getZoom();

      // Calculate the scale factor based on the bounds and zoom level
      const scaleFactor = Math.min(
        thumbnailBounds.getSize().x / mainBounds.getSize().x,
        thumbnailBounds.getSize().y / mainBounds.getSize().y
      );

      // Calculate the new center for the thumbnail map
      const center = mainBounds.getCenter();
      const newCenter = this.mainMap
        .latLngToContainerPoint(center)
        .divideBy(scaleFactor);

      // Set the view of the thumbnail map
      this.thumbnailMap.setView(
        this.thumbnailMap.containerPointToLatLng(newCenter),
        zoom
      );
    },
    onMainMapMove() {
      if (this.sync) {
        this.mainBounds = this.mainMap.getBounds();
        this.fitThumbnailBounds();
      }
    },
    onThumbnailMapMove() {
      if (this.sync) {
        // Disable synchronization temporarily to avoid infinite loop
        this.sync = false;

        // Calculate the new view for the main map based on the thumbnail map's view
        const thumbnailCenter = this.thumbnailMap.getCenter();
        const mainCenter = this.thumbnailMap
          .latLngToContainerPoint(thumbnailCenter)
          .multiplyBy(
            this.mainMap.getBounds().getSize().x /
              this.thumbnailMap.getBounds().getSize().x
          );
        
        console.log(this.thumbnailMap, '[[[[[')

        this.mainMap.setView(
          this.mainMap.containerPointToLatLng(mainCenter),
          this.mainMap.getZoom()
        );

        // Re-enable synchronization
        this.sync = true;
      }
    },
    syncMaps() {
      // This method can be used to manually sync maps, e.g., after some user interaction
      this.onMainMapMove();
    },
  },
};
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 500px; /* Adjust as needed */
}
.main-map {
  width: 100%;
  height: 100%;
}
.thumbnail-map {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 150px; /* Adjust as needed */
  height: 150px; /* Adjust as needed */
  border: 10px solid #ccc;
}
</style>
